<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
    <style>
        .active{
            color: red;
        }
        .greenColor{
            color: green;
        }
        .bigSize{
            font-size: 20px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    Vue.component('my-component',{
        template:'<ol><li >123</li></ol>'
    });
</script>
<div id="app-1">
    <div v-bind:class="{active:isActive , greenColor:hasPass}">active</div>
    <div v-bind:class="classObject">active Object</div>
    <div v-bind:class="computedClassObject">computedClassObject</div>
    <div v-bind:class="[activeClass,errorClass]">数组方式</div>
    <div v-bind:class="arrayObject">数组方式</div>
    <my-component></my-component>
    <div v-bind:style="{color:active,fontSize:fontSize + 'px'}">绑定style样式</div>
    <div v-bind:style="styleObject">绑定style样式对象形式</div>
    <div v-bind:style="[fontSizes]">数组形式样式</div>
    <div v-bind:style="[styleObject]">数组形式样式</div>
</div>
</body>
<script type="text/javascript">

    var app = new Vue({
        el:'#app-1',
        data:{
            active:'red',
            fontSize:'25',
            isActive:true,
            hasPass:false,
            styleObject:{
                color:'red',
                fontSize:'25px'
            },
            styleColors:'color: red',
            fontSizes:'font-size: 25px',
            activeClass:'active',
            errorClass:'bigSize',
            arrayObject:['active',"bigSize"],
            classObject:{
                active:true,
                greenColor:function (a) {
                    if(a=="123"){
                        a = true;
                    }else{
                        a = false;
                    }
                    console.log(a);
                    return a;
                }
            }
        },
        computed: {
            computedClassObject:function () {
                return {
                    active:this.isActive && !this.error,
                    'text-danger':this.error && this.error.type == 'false'
                }
            }
        }
    });
</script>
</html>